<!-- 产品列表 -->
<template>
<div class="">
    <h2>产品列表</h2>
    <ul>
        <li v-for="(product, index) in products" :key="product.id">
            <div>{{product.title}}</div>
            <button @click="addToCarts(product)">添加到购物车中</button>
        </li>
    </ul>
</div>
</template>

<script>
// import {getProducts} from "../api/shop"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    products:[]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    addToCarts:function(product){
        // console.log(product);
        this.$store.commit("addToCarts",product)
    }
},
created() {
    this.products = this.$store.state.products;
}

}
</script>
<style lang='less' scoped>

</style>